<template>
  <div class="wrap">
    <!-- 搜索框 -->
    <div class="search">
      <router-link to="/search">
        <van-search
          v-model="value"
          placeholder="搜索游戏、用户、厂商和帖子"
          shape="round"
        ></van-search>
      </router-link>
      <Thead />
    </div>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img src="http://8.142.22.78:3000/images/sixth2.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="http://8.142.22.78:3000/images/first2.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="http://8.142.22.78:3000/images/fourth2.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="http://8.142.22.78:3000/images/second2.jpg" alt=""
      /></van-swipe-item>
    </van-swipe>

    <!-- 各项列表 -->
    <div class="lists">
      <!-- 找游戏 -->
      <p class="search-games">
        <span class="smalltitle">找游戏</span><span class="more">查看更多</span>
      </p>

      <!-- 找游戏分类列表 -->
      <div class="search-games-wrap">
        <ul class="search-games-list">
          <li><img src="../../assets/images/tuijian@2x.png" alt="" /></li>
          <li><span class="span1">TapTap独家</span></li>
          <li><span>动作</span></li>
          <li><span>策略</span></li>
          <li><span>冒险</span></li>
          <li><span>角色</span></li>
        </ul>
      </div>

      <!-- Tab云玩游戏 -->
      <p class="tab-games">
        <span class="smalltitle">Tab云玩游戏</span
        ><span class="more">查看更多</span>
      </p>

      <!-- Tab云玩游戏分类列表 -->
      <div class="tab-games-list-wrap">
        <ul class="tab-games-list">
          <li
            v-for="item in tabgamesList.arr"
            :key="item._id"
            @click="goToDetail(item)"
          >
            <img :src="item.url" alt="" />
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>

      <!-- 每日新发现 -->
      <p class="discovery">
        <span class="smalltitle">每日新发现</span
        ><span class="more">查看更多</span>
      </p>

      <!-- 每日新发现分类列表 -->
      <div class="tab-games-list-wrap">
        <ul class="tab-games-list">
          <li
            v-for="item in tabgamesList.arr"
            :key="item._id"
            @click="goToDetail(item)"
          >
            <img :src="item.url" alt="" />
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Thead from "../../components/public/Tab-head";

export default {
  setup() {
    let tabgamesList = reactive({ arr: [] });
    const value = ref("");
    const router = useRouter();

    const goToDetail = (item) => {
      router.push("/details/" + item.id);
    };

    const discovery = () => {
      fetch("http://8.142.22.78:3000/api/home/list")
        .then((response) => response.json())
        .then((res) => {
          if (res.status == 0) {
            tabgamesList.arr = res.result;
            // console.log(res);
          }
        });
    };

    onMounted(() => {
      discovery();
    });

    return {
      tabgamesList,
      value,
      goToDetail,
      discovery,
    };
  },

  components: {
    Thead,
  },

  // data() {
  //   return {
  //     value: "",
  //     tabgamesList: [],
  //   };
  // },
  // components: {
  //   Thead,
  // },
  // mounted() {
  //   fetch("http://8.142.22.78:3000/api/home/list")
  //     .then((response) => response.json())
  //     .then((res) => {
  //       if (res.status == 0) {
  //         this.tabgamesList = res.result;
  //         // console.log(res);
  //       }
  //     });
  // },
  // methods: {
  //   goToDetail(item) {
  //     // 页面跳转
  //     this.$router.push("/details/" + item.id);
  //     // console.log(item.id);
  //   },
  // },
};
</script>

<style lang="less" scoped>
.wrap {
  background: #fff;
  margin-bottom: 57px;
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: auto;
}

// 搜索框
.search {
  width: 100%;
  padding-top: 14px;
  position: fixed;
  top: 0;
  left: -10px;
  z-index: 999;
  display: flex;
  background: #fff;

  .van-search {
    width: 303px;
    height: 34px;
    margin-left: 18px;

    /deep/ .van-search__content {
      background: #f5f5f5;
    }

    ::-webkit-input-placeholder {
      font-size: 17px;
      color: #999;
    }
  }
}

#head {
  margin-left: 16.5px;

  img {
    width: 30px;
    height: 30px;
  }
}

// 轮播图
.van-swipe {
  width: 342px;
  height: 142px;
  margin-left: 17px;
  margin-top: 60px;
  border-radius: 10px;

  img {
    width: 342px;
    height: 142px;
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
  }
}

// 各项列表
.lists {
  width: 360px;
  margin-left: 16px;
  margin-top: 25px;

  // 找游戏
  .search-games {
    height: 17px;
  }

  // 标题公用
  // 小标题
  .smalltitle {
    float: left;
    height: 17px;
    font-size: 17px;
    color: #333;
    line-height: 17px;
  }

  // 查看更多
  .more {
    float: right;
    margin-right: 16px;
    height: 17px;
    font-size: 12px;
    color: #34c3c6;
    line-height: 17px;
  }

  .search-games-wrap {
    width: 100%;
    height: 36px;
    margin-top: 14px;
    overflow-x: scroll;
  }

  // 找游戏列表
  .search-games-list {
    height: 100%;
    display: flex;
    align-items: auto;

    li {
      height: 100%;
      line-height: 36px;
      margin-right: 10px;
      flex-shrink: 0;
      text-align: center;

      img {
        height: 36px;
      }

      span {
        display: block;
        width: 68px;
        height: 36px;
        font-size: 14px;
        color: #13b9c7;
        background: #e6f8f8;
        border-radius: 18px;
      }

      .span1 {
        width: 90px;
      }
    }
  }

  // Tab云玩游戏
  .tab-games {
    height: 17px;
    margin-top: 40px;
  }

  .tab-games-list-wrap {
    overflow-x: auto;

    // Tab云玩游戏列表
    .tab-games-list {
      height: 110px;
      margin-top: 14px;
      display: inline-flex;

      li {
        width: 87px;
        height: 100%;
        margin-right: 10px;
        flex-shrink: 0;

        img {
          height: 87px;
        }

        p {
          font-size: 12px;
        }
      }
    }
  }

  // 每日新发现
  .discovery {
    height: 17px;
    margin-top: 50px;
  }
}
</style>
